<template>
	<view>

		<!--头部-->
		<view class="navbarbox navbarbox-white" :style="{ opacity: afterHeaderOpacity}">
			<view class="navbar">
				<view class="navbartitle navbartitle-black">任务中心</view>
				<image @click="cancela" class="navbarimage" src="../../static/icon/lefticon.png"></image>
			</view>
		</view>

		<view class="navbarbox" :style="{ opacity:1-afterHeaderOpacity}">
			<view class="navbar">
				<view class="navbartitle navbartitle-white">任务中心</view>
				<image @click="cancela" class="navbarimage" src="../../static/icon/lefticon-icon.png"></image>
			</view>
		</view>

		<!-- 背景区域 -->
		<view class="backgroundbox">
			<view style="width: 100%;height: 90rpx;"></view>
			<view class="flex ac" style="flex: 1;position: relative;margin:10rpx 0 30rpx 0;">
				<view style="font-size: 33rpx;color:#ffffff;font-weight: bold;">每日签到福利</view>
				<view v-if="countdata==0" class="days">未签到</view>
				<view v-else class="days">已连续签到{{countdata}}天</view>
			</view>
			<view style="width: 100%;height: 10rpx;"></view>
			<view class="progress-container">
				<view class="progress-bar" :style="{ width: progress + '%' }">
					<view class="progress-bar-border"></view>
				</view>
				<view class="flex jb" style="margin-top: 15rpx;font-size:26rpx;color: #ffffff;">
					<view>0</view>
					<view>1</view>
					<view>2</view>
					<view>3</view>
					<view>4</view>
					<view>5</view>
					<view>6</view>
					<view>7</view>
				</view>
			</view>
			<!-- 内容区域 -->
			<view class="signinbox">
				<!-- 签到区域 -->
				<view class="signinview">
					<view class="signinlist">
						<block v-for="(item,index) in daysdata" :key="index">
							<view v-if="index!==6" class="signinlistitem margin-bottom-20"
								:class="item.status==2?'signinlistactive':''">
								<view class="signinintext"
									:class="item.status==2?'signinintext-white':'signinintext-black'">第{{index+1}}天
								</view>
								<view v-if="item.status==2" class="yiqiandao">
									<image src="../../static/icon/aa/yiqiandao.png"></image>
								</view>
								<view v-if="index==0 || index==1 || index==2">
									<image class="signinimg"
										:src="item.status==2?'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fq7ycxwLJKG32OPYWDFhkxtVZ7do.png':'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FoUG2LntwSekvlmF9kbQmfX97ERW.png'">
									</image>
								</view>
								<view v-else-if="index==3">
									<image class="signinimg"
										:src="item.status==2?'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fvoel04hHU5tcAhB23kaR8eeD5gS.png':'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fhp8iFC0hg3815kpNdDBSVBhiC7T.png'">
									</image>
								</view>
								<view v-else-if="index==4">
									<image class="signinimg"
										:src="item.status==2?'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FnwojGLiutBIle-Kq20UGzTu6LyE.png':'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FgqYLED-8K88Djt3_cv7x6GncEQG.png'">
									</image>
								</view>
								<view v-else-if="index==5">
									<image class="signinimg"
										:src="item.status==2?'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Frmbv3rGqTtYah6NF44kIjcDkgVj.png':'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FgHasyzCAHYDBvyrhXDLjsbMJwTE.png'">
									</image>
								</view>
							</view>
							<view v-if="index==6" class="signinlistitema margin-bottom-20">
								<view class="signinintext signinintext-black">第{{index+1}}天</view>
								<view v-if="item.status==2" class="yiqiandao">
									<image src="../../static/icon/aa/yiqiandao.png"></image>
								</view>
								<view>
									<image class="signinimga"
										:src="item.status==2?'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fgbn1lWBVaBwxHrGBx_CtOQGic5q.png':'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FmPmMzCSNEGm_1kBLs9_xEmtt47S.png'">
									</image>
								</view>
							</view>
						</block>
					</view>
					<view class="signinbuttom">
						<view v-if="dayszhi==false" class="signinbua signinbua_f1" @click="signindata">今日签到</view>
						<view v-if="dayszhi==true" class="signinbua signinbua_f2" @click="signedin">今日已签到</view>
					</view>
				</view>

				<view style="width: 100%;height: 30rpx;"></view>

				<!-- 每日任务 -->
				<view class="title">每日任务</view>
				<view class="listbox">
					<view v-for="(item,index) in usercyclicdata" class="listview flex ac">
						<view class="listview-image">
							<image
								src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FoUv6W9v54ZYtgKk098NXlwKJ_K9.jpg">
							</image>
						</view>
						<view style="flex: 1;margin-left: 20rpx;">
							<view class="flex ac">
								<view style="color:#303030;font-size: 28rpx;">{{item.task_name}}≥1个</view>
								<view style="color:#b5b5b5;font-size: 25rpx;margin-left: 3rpx;">
									{{item.present}}/{{item.count}}
								</view>
							</view>
							<view style="color:#ff5e4c;font-size: 26rpx;margin-top: 5rpx;">赠送{{item.reward}}金币</view>
						</view>
						<view v-if="item.schedule==0" class="listbuttom listdotasks">去完成</view>
						<view v-if="item.schedule==1" class="listbuttom listcomplete" @click="obtain(item.id,2)">领取
						</view>
						<view v-if="item.schedule==2" class="listbuttom receive">已完成</view>
					</view>
				</view>

				<!-- 成长任务 -->
				<view class="title">成长任务</view>
				<view class="listbox">
					<view v-for="(item,index) in usermainlist" class="listview flex ac">
						<view class="listview-image">
							<image
								src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FoUv6W9v54ZYtgKk098NXlwKJ_K9.jpg">
							</image>
						</view>
						<view style="flex: 1;margin-left: 20rpx;">
							<view class="flex ac">
								<view style="color:#303030;font-size: 28rpx;">{{item.task_name}}≥1个</view>
								<view style="color:#b5b5b5;font-size: 25rpx;margin-left: 3rpx;">
									{{item.present}}/{{item.count}}
								</view>
							</view>
							<view style="color:#ff5e4c;font-size: 26rpx;margin-top: 5rpx;">赠送{{item.reward}}金币</view>
						</view>
						<view v-if="item.schedule==0" class="listbuttom listdotasks">去完成</view>
						<view v-if="item.schedule==1" class="listbuttom listcomplete" @click="obtain(item.id,1)">领取
						</view>
						<view v-if="item.schedule==2" class="listbuttom receive">已完成</view>
					</view>
				</view>

				<!-- 每日任务 -->
				<!-- 				<view class="title">每周任务</view>
				<view class="listbox">
					<view v-for="(item,index) in everydaylist" class="listview flex ac">
						<view class="listview-image">
							<image
								src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FoUv6W9v54ZYtgKk098NXlwKJ_K9.jpg">
							</image>
						</view>
						<view style="flex: 1;margin-left: 20rpx;">
							<view class="flex ac">
								<view style="color:#303030;font-size: 28rpx;">{{item.task_name}}≥1个</view>
								<view style="color:#b5b5b5;font-size: 25rpx;margin-left: 3rpx;">
									{{item.present}}/{{item.count}}
								</view>
							</view>
							<view style="color:#ff5e4c;font-size: 26rpx;margin-top: 5rpx;">赠送{{item.reward}}金币</view>
						</view>
						<view v-if="item.status==0" class="listbuttom listdotasks">去完成</view>
						<view v-if="item.status==1" class="listbuttom listcomplete" @click="obtain(item.id,3)">领取</view>
						<view v-if="item.status==2" class="listbuttom receive">已完成</view>
					</view>
				</view> -->

				<view style="width: 100%;height: 100rpx;"></view>

				<!-- 签到弹窗提示 -->
				<view v-if="explainvalie==true" class="explainbox">
					<view class="explainview">
						<view class="explainview-image">签到成功～</view>
						<view style="width: 100%;height: 70rpx;"></view>
						<view class="explaintitle">以下奖励已发放</view>
						<view class="explainborder flex ac">
							<image style="width: 80rpx;height: 80rpx;" src="../../static/icon/aa/qiandaobi.png"></image>
							<view style="margin-left: 10rpx;">1U币</view>
						</view>
						<image @click.stop="closedata" class="guanbi" src="../../static/icon/aa/guanbi.png"></image>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				countdata: 0, //已签到天数
				dayszhi: false, //是否今天签到
				beforeHeaderOpacity: 1, //不透明度
				afterHeaderOpacity: 0, //不透明度
				progress: 0,
				daysdata: [],
				usercyclicdata: [],
				usermainlist: [],
				everydaylist: [],
				explainvalie: false, //签到弹窗提示
			}
		},

		//页面滚动执行方式
		onPageScroll(e) {
			this.scrollTop = e.scrollTop

			//导航栏渐变
			let tmpY = 168;
			e.scrollTop = e.scrollTop > tmpY ? 168 : e.scrollTop;
			this.afterHeaderOpacity = e.scrollTop * (1 / tmpY);
			this.beforeHeaderOpacity = 1 - this.afterHeaderOpacity;

			if (this.scrollTop > 500 && !this.bottomDateShow) {
				this.bottomDateShow = true
			}
			if (this.scrollTop <= 500 && this.bottomDateShow) {
				this.bottomDateShow = false
			}

		},

		onLoad() {
			this.usersigdata() //获取签到数据
			this.cyclictask() //请求每日任务
			this.usermaindata() //请求用户任务
			// this.everyday() //请求每周任务
		},

		methods: {
			//关闭
			closedata(e) {
				this.explainvalie = false
			},

			opendata(e) {
				this.explainvalie = true
			},

			//领取任务
			async obtain(id, zhi) {
				var taskid = id
				var taskclass = zhi
				let apply = await request(`${getApp().globalData.http}task/get_reward`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					task_id: taskid,
					task_class: taskclass,
				})
				if (apply.data.code == 0) {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
					if (taskclass == 2) {
						this.usercyclicdata = []
						this.cyclictask() //请求每日任务
					}
					if (taskclass == 1) {
						this.usermainlist = []
						this.usermaindata() //请求用户任务
					}
					// if (taskclass == 3) {
					// 	this.everydaylist = []
					// 	this.everyday() //请求每周任务
					// }
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}
			},

			//请求每周任务
			// async everyday(e) {
			// 	let apply = await request(`${getApp().globalData.http}task/user_cyclic_task`, {
			// 		'X-Requested-With': 'XMLHttpRequest',
			// 		'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
			// 	}, "GET", {
			// 		token: getApp().globalData.token,
			// 		differentiate: 2,
			// 	})
			// 	if (apply.data.code == 0) {
			// 		this.everydaylist = apply.data.data
			// 	}
			// },

			//请求用户任务
			async usermaindata(e) {
				let apply = await request(`${getApp().globalData.http}task/user_main_task`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
				})
				if (apply.data.code == 0) {
					this.usermainlist = apply.data.data
				}
			},

			//请求每日任务
			async cyclictask(e) {
				let apply = await request(`${getApp().globalData.http}task/user_cyclic_task`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					differentiate: 1,
				})
				if (apply.data.code == 0) {
					console.log(apply.data)
					this.usercyclicdata = apply.data.data
				}
			},

			//已经签到
			signedin(e) {
				uni.showToast({
					title: '今日已签到，明天奖励更丰富哦～',
					duration: 1000,
					icon: "none",
				})
			},

			//签到
			async signindata(e) {
				let apply = await request(`${getApp().globalData.http}task/sign_in`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
				})
				if (apply.data.code == 0) {
					// uni.showToast({
					// 	title: `${apply.data.message}`,
					// 	icon: "none",
					// })
					this.opendata()
					this.usersigdata()
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}
			},

			cancela(e) {
				uni.navigateBack({
					dalta: 1,
				})
			},

			// updateProgress() {
			// 	const maxProgress = 100;
			// 	const interval = setInterval(() => {
			// 		if (this.progress < maxProgress) {
			// 			//this.progress = 14; // 每秒增加10%
			// 			//0:0
			// 			//1:14
			// 			//2:28
			// 			//3:42
			// 			//4:56
			// 			//5:70
			// 			//6:84
			// 			//7:98
			// 		} else {
			// 			clearInterval(interval);
			// 		}
			// 	}, 500);
			// },

			//获取签到数据
			async usersigdata(e) {
				let apply = await request(`${getApp().globalData.http}task/user_sign_in`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
				})
				if (apply.data.code == 0) {
					this.daysdata = apply.data.data

					if (apply.data.isSignIn == 1) {
						this.dayszhi = true
					} else {
						this.dayszhi = false
					}

					var arr = []
					for (var i = 0; i < apply.data.data.length; i++) {
						if (apply.data.data[i].status == 2) {
							arr.push(apply.data.data[i])
						}
					}

					this.countdata = arr.length

					if (arr.length == 1) {
						this.progress = 14; // 每秒增加10%
					}
					if (arr.length == 2) {
						this.progress = 28; // 每秒增加10%
					}
					if (arr.length == 3) {
						this.progress = 42; // 每秒增加10%
					}
					if (arr.length == 4) {
						this.progress = 56; // 每秒增加10%
					}
					if (arr.length == 5) {
						this.progress = 70; // 每秒增加10%
					}
					if (arr.length == 6) {
						this.progress = 84; // 每秒增加10%
					}
					if (arr.length == 7) {
						this.progress = 98; // 每秒增加10%
					}

				}
			},

		}
	}
</script>

<style lang="scss">
	@import url("taskcenter.css");

	page {
		background-color: #ffffff;
	}

	.progress-container {
		width: 100%;
		height: 16rpx;
		background-color: hsla(0, 0%, 100%, .2);
		border-radius: 5px;
		padding: 5rpx 0;
	}

	.progress-bar {
		width: 0;
		height: 100%;
		background-color: #ffffff;
		transition: width 0.5s ease-in-out;
		border-radius: 5px;
		position: relative;
	}

	.progress-bar-border {
		position: absolute;
		right: -20rpx;
		top: -10rpx;
		width: 25rpx;
		height: 25rpx;
		background-color: #ffffff;
		border-radius: 50%;
	}


	// 弹窗说明
	.explainbox {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
		background-color: rgba(0, 0, 0, .7);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.explainview {
		width: 560rpx;
		height: 350rpx;
		background-color: #ffffff;
		border-radius: 50rpx;
		position: relative;
		display: flex;
		// justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 0 30rpx;
	}

	.explainview-image {
		width: 392rpx;
		height: 90rpx;
		background-image: url('../../static/icon/aa/tishikuan.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: absolute;
		top: -50rpx;
		font-size: 36rpx;
		color: #ffffff;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.explaintitle {
		font-size: 30rpx;
		color: #878787;
		text-align: center;
	}

	.explainborder {
		border: 1px solid #f3e6ff;
		border-radius: 5rpx;
		width: 100%;
		padding: 30rpx 20rpx;
		margin-top: 30rpx;
	}

	.guanbi {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		bottom: -100rpx;
	}
</style>